<template>
    <div>
        <div style="line-height: 30px;margin-bottom: 4px;background-color: #ffffff;font-size: 18px;padding: 10px 30px 10px 30px">
            项目管理申报系统
            <el-button type="primary" style="float: right; padding: 5px 15px!important;margin-top: 4px"
                       @click="createModalVisible = true"
                       icon="el-icon-edit">新建迭代
            </el-button>
            <el-button type="primary"
                       @click="editNotice"
                       icon="el-icon-edit">编辑迭代
            </el-button>
        </div>
        <!--        新建迭代对话框-->
        <el-dialog
                title=新建迭代
                :visible.sync="createModalVisible"
                width="30%"
        >
            <el-form :model="newIter">
                <el-form-item label="迭代标题">
                    <el-input v-model="newIter.projectName"></el-input>
                </el-form-item>
                <el-form-item label="迭代描述">
                    <el-input type="textarea" aria-placeholder="输入迭代描述" v-model="newIter.content"></el-input>
                </el-form-item>
                <el-form-item label="迭代状态">
                    <el-input-number v-model="newIter.projectStatus" :min="1" :max="10" label="项目状态"></el-input-number>
                </el-form-item>
                <el-form-item label="起止日期">
                    <el-date-picker
                            v-model="newIter.time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="createModalVisible = false">取 消</el-button>
                <el-button type="primary" @click="iterPost('put')">确 定</el-button>
            </span>
        </el-dialog>

        <el-row style="margin-top: 20px" :gutter="20">
            <!--            项目迭代列表-->
            <el-col :span="4">
                <!--                <p>迭代列表</p>-->
                <el-card v-for="(o, index) in iterList" class="box-card iteration">
                    <div slot="header" class="clearfix">
                        <span>{{o.iterationName}}</span>
                        <span class="names"><br>@{{o.projectManager}}</span>
                    </div>
                    <el-col>
                        <span class="names">{{o.startTime}}</span>
                        <span class="names">-{{o.finishTime}}</span>
                    </el-col>
                    <el-col style="margin-bottom: 10px">
                        <el-button style="padding: 0" @click="getIterInfo(o.projectId)" type="text">查看详情</el-button>
                        <template>
                            <el-popconfirm
                                    title="是否确认删除此次迭代？"
                                    style="margin-left: 10px"
                                    @onConfirm="delIter(o.projectId)"
                            >
                                <el-button slot="reference" type="text">删除迭代</el-button>
                            </el-popconfirm>
                        </template>
                    </el-col>
                </el-card>
            </el-col>
            <el-col :span="19">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <!--                        项目信息开始-->
                        <el-card shadow="hover" class="mgb20" style="height:276px;">
                            <el-row :gutter="20">
                                <el-col :span="8">{{current.iterationName}}</el-col>
                                <el-col :span="8" style="float: right;">
                                    <el-tag type="success">已完成</el-tag>
                                </el-col>
                            </el-row>
                            <div class="user-info">
                                <img src="../../../assets/img/img.jpg" class="user-avator" alt/>
                                <div class="user-info-cont">
                                    <div class="user-info-name">{{current.projectManager}}</div>
                                    <!--                                    <div>{{role}}</div>-->
                                </div>
                            </div>
                            <div class="user-info-list">
                                计划工期：
                                <span>{{current.startTime}}-{{current.finishTime}}</span>
                            </div>
                            <el-row :gutter="20" class="mgb20">
                                <p style="font-size: 14px;color: #999999">工作项状态：</p>

                                <el-col :span="8">
                                    <el-card style="border: #ffffff" shadow="hover" :body-style="{padding: '0px'}">
                                        <div class="grid-content grid-con-2">
                                            <!--                                            <i class="el-icon-check grid-con-icon"></i>-->
                                            <div class="grid-cont-right">
                                                <div class="grid-num">{{current.projectStatus}}</div>
                                                <!--                                                <div>已完成</div>-->
                                            </div>
                                        </div>
                                    </el-card>
                                </el-col>
                            </el-row>
                            <div class="user-info-list">
                                所属项目：
                                <span>{{current.projectName}}</span>
                            </div>
                            <!--                            <div class="user-info-list">-->
                            <!--                                项目整体进度：-->
                            <!--                                <el-progress :percentage="24.1" color="#f1e05a"></el-progress>-->
                            <!--                            </div>-->
                        </el-card>
                        <!--                        项目信息结束-->

                        <!--                        项目描述-->
                        <el-card shadow="hover" style="height:236px;">
                            <div slot="header" class="clearfix">
                                <span>迭代描述（项目描述）</span>
                            </div>
                            {{current.description}}
                        </el-card>
                    </el-col>
                    <!--                    公告板块-->
                    <el-col :span="16" style="margin-top: 6px;height: 526px!important;">
                        <el-card shadow="hover" style="height:523px;">
                            <div slot="header" class="clearfix">
                                <span>公告</span>
                                <el-button style="float: right; padding: 3px 0" type="text" @click="addNotice">添加
                                </el-button>
                            </div>
                            <!--                            公告列表-->
                            <el-table :show-header="false" :data="noticeList" style="width:100%;">
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <div
                                                class="todo-item"
                                                :class="{'todo-item-del': scope.row.status}"
                                        >{{scope.row.noticeContent}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column fixed="right" width="120">
                                    <template slot-scope="scope">
                                        <div
                                        >{{scope.row.createTime}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <!--                                <el-table-column width="60">-->
                                <!--                                    &lt;!&ndash;                                    <template>&ndash;&gt;-->
                                <!--                                    &lt;!&ndash;                                        <i class="el-icon-edit"></i>&ndash;&gt;-->
                                <!--                                    &lt;!&ndash;                                        <i class="el-icon-delete"></i>&ndash;&gt;-->
                                <!--                                    &lt;!&ndash;                                    </template>&ndash;&gt;-->

                                <!--                                </el-table-column>-->
                            </el-table>
                        </el-card>
                    </el-col>
                </el-row>
                <!--                工作项-->
                <el-row :gutter="20">
                    <el-col :span="11">
                        <el-card shadow="hover" style="height:403px;">
                            <div slot="header" class="clearfix">
                                <span>工作项</span>
                                <el-button style="float: right; padding: 3px 0" type="text">添加</el-button>
                            </div>
                            <!--                            工作项表格-->
                            <el-table :show-header="false" :data="todoList" style="width:100%;">
                                <!--                                <el-table-column width="40">-->
                                <!--                                    <template slot-scope="scope">-->
                                <!--                                        <el-checkbox v-model="scope.row.status"></el-checkbox>-->
                                <!--                                    </template>-->
                                <!--                                </el-table-column>-->
                                <el-table-column>
                                    <template slot-scope="scope">
                                        <div
                                                class="todo-item"
                                                :class="{'todo-item-del': scope.row.status}"
                                        >{{scope.row.title}}
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column width="60">
                                    <template>
                                        <i class="el-icon-edit"></i>
                                        <i class="el-icon-delete"></i>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </el-col>
                    <!--                    项目实施进度表-图表-->
                    <el-col :span="12" style="margin-top: 6px;height: 526px!important;">
                        <!--                        <el-card shadow="hover" style="height: 522px!important;">-->
                        <!--                            甘特图-->
                        <!--                            <schart ref="bar" class="schart" canvasId="bar" :options="options"></schart>-->
                        <!--                        </el-card>-->
                        <div ref="chart" style="width:100%;height:376px"></div>
                    </el-col>
                </el-row>
                <!--                最下方-当前阶段进度条-->
                <div style="background-color: #ffffff;padding: 20px">
                    <p style="font-size: 15px; margin-bottom: 14px">当前阶段 <span style="font-size: 14px; color: #999999">（点选进度条更改迭代阶段）</span>
                    </p>
                    <el-steps :active="1" finish-status="success">
                        <el-step status="success" title="未开始" description="迭代开始日期2020.8.1"></el-step>
                        <el-step status="finish" title="进行中" description="当前进度2020.8.1"></el-step>
                        <el-step status="wait" title="已完成" description="预计结束日期2020.8.1"></el-step>
                    </el-steps>
                </div>
            </el-col>
        </el-row>
        <!--                <Gantt></Gantt>-->
    </div>
</template>

<script>
    import Schart from 'vue-schart';
    // import Gantt from './Gantt/ProjectManager.vue'
    import {
        delIteration,
        iteration,
        iterationInfo,
        iterationPost,
        iterationPut
    } from '../../../api/project/iteration';
    import { dateConvert } from '../../../utils/date';
    import { noticeShow } from '../../../api/project/notice';

    export default {
        // name: 'dashboard',
        data() {
            return {
                // 新建迭代弹框控制属性
                createModalVisible: false,
                // 公告列表
                noticeList: [{
                    noticeId: '0',
                    noticeContent: '',
                    createTime: '...'
                }],
                // 创新的迭代的信息
                newIter: {
                    content: '',
                    // 迭代名称
                    projectName: '',
                    projectStatus: 1,
                    time: ''
                },
                // 当前展示的迭代
                current: {
                    // 迭代id
                    projectId: '0',
                    // 所属项目id
                    projectSid: '0',
                    projectNameF: '*', //所属项目名称
                    projectName: '*', // 迭代名称
                    projectManager: '', // 项目负责人id
                    realname: '*',
                    projectStatus: '*', // 项目状态
                    description: '....',
                    startTime: '2020/7/27',
                    finishTime: '2020/9/21'
                },
                activeName: 'second',
                // 项目迭代列表
                iterList: [{
                    projectName: '第一次迭代',
                    projectManager: '*',
                    // projectStatus:1,
                    description: '*',
                    startTime: '2020/7/27',
                    finishTime: '2020/9/21'
                }],
                todoList: [
                    {
                        title: '今天要修复100个bug',
                        status: false
                    },
                    {
                        title: '今天要修复100个bug',
                        status: false
                    }
                ],
                data: [
                    {
                        name: '2018/09/04',
                        value: 1083
                    }
                ],
                options: {
                    type: 'bar',
                    title: {
                        text: '最近一周各品类销售图'
                    },
                    xRorate: 25,
                    labels: ['周一', '周二', '周三', '周四', '周五'],
                    datasets: [
                        {
                            label: '家电',
                            data: [234, 278, 270, 190, 230]
                        },
                        {
                            label: '百货',
                            data: [164, 178, 190, 135, 160]
                        },
                        {
                            label: '食品',
                            data: [144, 198, 150, 235, 120]
                        }
                    ]
                },
                options2: {
                    type: 'line',
                    title: {
                        text: '最近几个月各品类销售趋势图'
                    },
                    labels: ['6月', '7月', '8月', '9月', '10月'],
                    datasets: [
                        {
                            label: '家电',
                            data: [234, 278, 270, 190, 230]
                        },
                        {
                            label: '百货',
                            data: [164, 178, 150, 135, 160]
                        },
                        {
                            label: '食品',
                            data: [74, 118, 200, 235, 90]
                        }
                    ]
                }
            };
        },
        components: {
            Schart
        },
        mounted() {
            this.getEchartData();
        },
        computed: {},
        created() {
            // this.handleListener();
            // this.changeDate();
            this.getIterationList();
            this.getNotice();
        },
        // activated() {
        //     this.handleListener();
        // },
        // deactivated() {
        //     window.removeEventListener('resize', this.renderChart);
        //     bus.$off('collapse', this.handleBus);
        // },
        methods: {
            // 编辑迭代
            editNotice() {
                let pre = this.current;
                this.newIter = {
                    content: pre.description,
                    // 迭代名称
                    projectName: pre.projectName,
                    projectStatus: pre.projectStatus,
                    projectId: pre.projectId,
                    time: [pre.startTime, pre.finishTime]
                };
                this.createModalVisible = !this.createModalVisible;
            },
            // 添加公告
            addNotice() {
                this.$message.warning('暂未开通，请前往公告页完成操作');
            },
            // 获取公告
            getNotice() {
                noticeShow({ projectId: this.$route.query.projectId }).then(res => {
                    if (res.data.length > 0) {
                        let endArr = [];
                        let topArr = [];
                        // 筛选置顶的公告
                        res.data.forEach((item, index) => {
                            let arr = item.createTime.splice(0, 3);
                            item.createTime = arr.join('-');
                            if (item.isTop === 0) endArr.push(item);
                            else topArr.push(item);
                        });
                        topArr = topArr.concat(endArr);
                        this.noticeList = topArr;
                    } else {
                        this.noticeList = {
                            noticeContent: '暂无公告',
                            createTime: '...'
                        }
                    }
                });
            },
            // 新建迭代
            iterPost(type = 'post') {
                let data = this.newIter;
                let that = this;
                let projectId = this.$route.query.projectId;
                let postData = {
                    projectName: data.projectName,
                    projectSid: projectId,
                    projectStatus: data.projectStatus,
                    description: data.content,
                    startTime: data.time[0],
                    finishTime: data.time[1]
                };
                if (type === 'put') {
                    delete postData.projectSid;
                    postData['projectId'] = data.projectId;
                    return iterationPut(postData).then(res => {
                        if (res)
                            this.$message.success({
                                title: '修改成功',
                                duration: 1000,
                                onClose: location.reload()
                            });
                    });
                }
                iterationPost(postData).then(res => {
                    if (res)
                        this.$message.success({
                            title: '创建成功',
                            duration: 1000,
                            onClose: location.reload()
                        });
                });
            },
            // 获取迭代信息列表
            getIterationList() {
                iteration({
                    projectSid: this.$route.query.projectId
                }).then(res => {
                    console.log(res.data.length > 0)
                    if (res.data.length > 0) {
                        res.data.forEach(item => {
                            item.startTime = dateConvert(item.startTime, 3, '/');
                            item.finishTime = dateConvert(item.finishTime, 3, '/');
                        });
                        console.log(res.data);
                        this.iterList = res.data;
                        // 获取第一条迭代的id 交给迭代详情数据及逆行渲染
                        this.getIterInfo(res.data[0].projectId);
                    } else {
                        console.log("error")
                        this.iterList[0] = {
                            projectName: '暂无迭代',
                            projectManager: '',
                            // projectStatus:1,
                            description: '快去新建迭代吧！',
                            startTime: '',
                            finishTime: ''
                        };
                    }
                });
            },
            // 获取迭代详情
            getIterInfo(id) {
                iterationInfo({ projectId: id }).then(res => {
                    if (res.data) {
                        res.data.startTime = dateConvert(res.data.startTime);
                        res.data.finishTime = dateConvert(res.data.finishTime);
                        this.current = res.data;
                    }
                });
            },
            // 删除迭代 -> 弹框
            delIter(id) {
                let that = this;
                delIteration({ projectId: id }).then(res => {
                    this.$message.success({
                        title: '删除成功',
                        duration: 1000,
                        onClose: function() {
                            that.iterList.find((item, index) => {
                                console.log(item);
                                if (item.projectId === id) {
                                    that.iterList.splice(index, 1);
                                }
                                if (that.current.projectId === id)
                                // 获取第一条迭代的id 交给迭代详情数据及逆行渲染
                                    return that.getIterInfo(that.iterList[index - 1 || 0].projectId);
                            });
                        }
                    });
                });
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            changeDate() {
                const now = new Date().getTime();
                this.data.forEach((item, index) => {
                    const date = new Date(now - (6 - index) * 86400000);
                    item.name = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
                });
            },
            // handleListener() {
            //     bus.$on('collapse', this.handleBus);
            //     // 调用renderChart方法对图表进行重新渲染
            //     window.addEventListener('resize', this.renderChart);
            // },
            // handleBus(msg) {
            //     setTimeout(() => {
            //         this.renderChart();
            //     }, 200);
            // },
            // renderChart() {
            //     this.$refs.bar.renderChart();
            //     this.$refs.line.renderChart();
            // }
            getEchartData() {
                const chart = this.$refs.chart;
                if (chart) {
                    const myChart = this.$echarts.init(chart);
                    const option = {
                        title: {
                            text: '项目实施进度表',
                            left: 10
                        },
                        legend: {
                            y: 'bottom',
                            data: ['计划时间', '实际时间']  //修改的地方1

                        },
                        grid: {
                            containLabel: true,
                            left: 20
                        },
                        xAxis: {
                            type: 'time'
                        },

                        yAxis: {

                            data: ['任务一', '任务二', '任务三', '任务四', '任务五', '任务六', '任务七']

                        },
                        tooltip: {
                            trigger: 'axis',
                            formatter: function(params) {
                                var res = params[0].name + '</br>';
                                var date0 = params[0].data;
                                var date1 = params[1].data;
                                var date2 = params[2].data;
                                var date3 = params[3].data;
                                date0 = date0.getFullYear() + '-' + (date0.getMonth() + 1) + '-' + date0.getDate();
                                date1 = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate();
                                date2 = date2.getFullYear() + '-' + (date2.getMonth() + 1) + '-' + date2.getDate();
                                date3 = date3.getFullYear() + '-' + (date3.getMonth() + 1) + '-' + date3.getDate();
                                res += params[0].seriesName + '~' + params[1].seriesName + ':</br>' + date0 + '~' + date1 + '</br>';
                                res += params[2].seriesName + '~' + params[3].seriesName + ':</br>' + date2 + '~' + date3 + '</br>';
                                console.log(params[0]);
                                return res;
                            }
                        },
                        series: [

                            {
                                name: '计划开始时间',
                                type: 'bar',
                                stack: 'test1',
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(0,0,0,0)'
                                    }
                                },
                                data: [
                                    new Date('2015/09/2'),
                                    new Date('2015/09/15'),
                                    new Date('2015/09/15'),
                                    new Date('2015/10/03'),
                                    new Date('2015/10/04'),
                                    new Date('2015/10/05'),
                                    new Date('2015/10/06')
                                ]
                            },
                            {
                                name: '计划时间',
                                type: 'bar',
                                stack: 'test1',
                                //修改地方2
                                itemStyle: {
                                    normal: {
                                        color: '#F98563'
                                    }
                                },
                                data: [
                                    new Date('2015/09/12'),
                                    new Date('2015/09/20'),
                                    new Date('2015/09/25'),
                                    new Date('2015/10/05'),
                                    new Date('2015/10/07'),
                                    new Date('2015/10/09'),
                                    new Date('2015/10/12')
                                ]
                            },
                            {
                                name: '实际开始时间',
                                type: 'bar',
                                stack: 'test2',
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(0,0,0,0)'
                                    }
                                },
                                data: [
                                    new Date('2015/09/2'),
                                    new Date('2015/09/15'),
                                    new Date('2015/09/15'),
                                    new Date('2015/10/03'),
                                    new Date('2015/10/04'),
                                    new Date('2015/10/05'),
                                    new Date('2015/10/06')
                                ]
                            },
                            {
                                name: '实际时间',
                                type: 'bar',
                                stack: 'test2',
                                //修改地方3
                                itemStyle: {
                                    normal: {
                                        color: '#A2E068'
                                    }
                                },
                                data: [
                                    new Date('2015/09/6'),
                                    new Date('2015/09/20'),
                                    new Date('2015/09/27'),
                                    new Date('2015/10/11'),
                                    new Date('2015/10/16'),
                                    new Date('2015/10/18'),
                                    new Date('2015/10/17')
                                ]
                            }
                        ]
                    };
                    myChart.setOption(option);
                    window.addEventListener('resize', function() {
                        myChart.resize();
                    });
                }
                this.$on('hook:destroyed', () => {
                    window.removeEventListener('resize', function() {
                        myChart.resize();
                    });
                });
            }
        }
    };
</script>

<style scoped>
    .names {
        color: #909399;
    }

    .iteration {
        margin-bottom: 10px;
    }

    .el-row {
        margin-bottom: 20px;
    }

    .grid-content {
        font-size: 16px;
        display: flex;
        align-items: center;
        height: 35px;
    }

    .grid-cont-right {
        flex: 1;
        text-align: center;
        font-size: 14px;
        color: #999;
    }

    .grid-num {
        font-size: 14px;
        font-weight: bold;
    }

    .grid-con-icon {
        font-size: 40px;
        width: 40px;
        height: 40px;
        text-align: center;
        color: #fff;
    }

    /*.grid-con-1 .grid-con-icon {*/
    /*    font-size: 14px;*/
    /*    color:  #FFD700;*/
    /*}*/

    .grid-con-1 .grid-num {
        color: #FFD700
    }

    /*.grid-con-2 .grid-con-icon {*/
    /*    background: rgb(100, 213, 114);*/
    /*}*/

    .grid-con-2 .grid-num {
        color: rgb(100, 213, 114);
    }

    /*.grid-con-3 .grid-con-icon {*/
    /*    font-size: 14px;*/
    /*    color: #2d8cf0;*/
    /*    !*background: rgb(242, 94, 67);*!*/
    /*}*/

    .grid-con-3 .grid-num {
        color: rgb(45, 140, 240);
    }

    .user-info {
        display: flex;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .user-avator {
        width: 40px;
        height: 40px;
        border-radius: 50%;
    }

    .user-info-cont {
        padding-left: 20px;
        flex: 1;
        font-size: 14px;
        color: #999;
    }

    .user-info-cont div:first-child {
        font-size: 15px;
        color: #222;
    }

    .user-info-list {
        font-size: 14px;
        color: #999;
        line-height: 25px;
    }

    .user-info-list span {
        margin-left: 70px;
    }

    .mgb20 {
        margin-left: 0px !important;
        margin-right: 0px !important;
        margin-top: 6px;
        margin-bottom: 8px;
    }

    .todo-item {
        font-size: 14px;
    }

    .todo-item-del {
        text-decoration: line-through;
        color: #999;
    }

    .schart {
        width: 100%;
        height: 300px;
    }
</style>
